<!--
 * @Author: actor
 * @Date: 2023-12-08 11:47:43
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 15:30:02
 * @FilePath: \i-hos-app\shared\emr\src\components\common\JsonList.vue
 * @Description: json数据列表
-->
<template>
  <div class="jsonList">
    <div v-if="!!configStore.json">
      <div
        v-for="(children, keys) in configStore.json"
        :class="[visiable == keys ? 'active' : '']"
        @click="
          () => {
            visiable = keys
          }
        "
      >
        <div class="title"
          ><el-icon color="#a8abb2"><CaretRight /></el-icon>{{ keys }}</div
        >
        <ul v-if="Object.keys(children).length > 0">
          <li v-for="(val, key) in children" @click="handKey(key)"> { {{ key }}: " {{ val }} " } </li>
        </ul>
      </div>
    </div>
    <el-empty v-else description="暂无数据" :image-size="150" />
  </div>
</template>

<script setup lang="ts">
  import { Ref, ref, getCurrentInstance } from 'vue'
  import { IPageConfigStore } from '../../interface/page'
  // store数据
  import { usePageConfigStore } from '../../store/pageConfig'
  // 解构 store的配置数据
  const configStore: IPageConfigStore = usePageConfigStore()
  let visiable: Ref<string> = ref('')

  const handKey = (flag: any): void => {
    let curTag = document.getElementById(flag) as HTMLElement,
      emrMain = document.querySelector('.emr_main') as HTMLElement

    curTag.classList.add('markBlink')
    if (curTag.offsetTop > emrMain.offsetHeight) {
      emrMain.scrollTo({ top: curTag.offsetTop / 2, behavior: 'smooth' })
    }
    if (emrMain.scrollTop > curTag.offsetTop) {
      emrMain.scrollTo({ top: curTag.offsetTop, behavior: 'smooth' })
    }
    setTimeout(() => {
      curTag.classList.remove('markBlink')
    }, 1200)
  }
</script>

<style scoped lang="scss">
  .jsonList {
    line-height: 20px;
    font-size: var(--theme-font-size);
    color: #606266;
    padding: 0 5px;
    .title {
      font-weight: bold;
      display: flex;
      align-items: center;
      cursor: pointer;
      .el-icon {
        transition: all 0.3s;
        margin-right: 5px;
      }
    }
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
      transition: all 1s;
    }
    ul {
      border-left: 1px dashed #9f9f9f;
      margin-left: 20px;
      height: 0;
      transform-origin: 50% 0;
      transform: scaleY(0);
      overflow: hidden;
      transition: all 0.3s;
    }
    li {
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      &::before {
        content: '--';
        display: inline-block;
        color: #9f9f9f;
      }
    }
    .active {
      ul {
        transform: scaleY(1);
        height: auto;
        overflow: auto;
      }
      .title {
        .el-icon {
          transform: rotate(90deg);
        }
      }
    }
  }
</style>
